<template>
    <div class="advertise">
        <div style="width: 95%;height: 90%;background-color: gainsboro;border-radius: 20px">
            <!-- 标题，正在热卖 -->
            <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;background-color: gainsboro;border-radius: 20px 20px 0 0">
                <h3>
                    <span class="el-icon-loading" style="color: blue"></span>
                    &nbsp; 正在热卖 &nbsp;
                    <span class="el-icon-loading" style="color: blue"></span>
                </h3>
            </div>

            <!-- s -->
            <div style="width: 100%;height:80%;padding-left: 10px;padding-right: 10px;background-color: deepskyblue">
                <div style="width: 100%;height: 100%;">
                    <div class="showAdvertise">
                        <!--
                            属性分析：
                            interval 轮播间隙
                        -->
                        <el-carousel :interval="2500"
                                     type="card"
                                     arrow="always"
                                     height="375.5px"
                                     indicator-position="outside"
                        >
                            <el-carousel-item v-for="(item,index) in advertiseList" :key="index">
                                <img :src="require('@/assets/drinks/'+testImg(item)+'.jpg')" class="carousel_image_type">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    export default {
        name: "Advertisements",
        data(){
            return{
                advertiseList:this.$store.state.advertise,
                nameList:[]
            }
        },
        created() {
            this.nameList = require("@/assets/json/exists.json").nameList
        },
        methods:{
            testImg(name){
                if(this.nameList.indexOf(name)!=-1){
                    return name
                }else {
                    return '默认果汁'
                }
            }
        }
    }
</script>

<style scoped>
    .advertise{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .showAdvertise{
        width: 100%;
        height: 100%;
        background-image:url("~@/assets/hot.gif");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .carousel_image_type{
        margin-top: 120px;
        width: 100%;
        border-radius: 20px;
        background-color: white;
    }

</style>